<template>
  <div class="box">
    <h3>邀请你加入群聊:{{ props.data.content }}</h3>
    <div><button @click="agree" class="box-btn">同意</button></div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { useMainStore } from "@/store/main";
const store = useMainStore();
const props = defineProps<{
  data: any;
}>();

function agree() {
  store.socket.emit("sendGroupMsg", {
    userInfo: store.userInfo,
    groupId: props.data.timestamp,
  });
}
</script>

<style scoped>
.box {
  position: relative;
  width: 300px;
  height: 100px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 6px;
  line-height: 70px;
}

.box-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35px;
  background-color: white;
  border: none;
  font-weight: 900;
  color: rgb(133, 106, 239);
  border-top: 1px solid rgb(133, 106, 239);
  border-radius: 0 0 6px 6px;
  cursor: pointer;
}
</style>
